<template>
  <div>
    <!-- 第一页---上半部分 -->
    <div class="first">
      <!-- 第一部分 -->
      <img class="advertisement" src="../../assets/upload/广告.jpg" alt="" />
      <div class="first-left">
        <!-- 左边 -->
        <dl class="left-dl">
          <dt><h2>要闻</h2></dt>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285192.html"
              >房地产的关键5月：政策快车道与市场蓄力期</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285177.html"
              >南京栖霞区一宗商业用地终止出让 原起始价9500万元</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285178.html"
              >哈尔滨正式废止主城6区限售政策，驻马店推最高5万元购房补贴</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285180.html"
              >国常会：因城施策支持刚性和改善性住房需求</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285190.html"
              >青岛：连续足额缴存6个月可申请个人住房公积金贷款</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285193.html"
              >疫中探市丨疫情催化产业园区变革</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285188.html"
              >中国长城资产：一季度收购金融不良资产305亿元
              助力房地产市场风险化解</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285189.html"
              >湖南落实房地产市场调控目标 优化房地产用地审批</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/05/24/1285198.html"
              >河南平舆首笔近300万元特色产业供应链融资落地</a
            >
          </dd>
        </dl>
      </div>
      <div class="first-center">
        <img src="../../assets/upload/city3.jpg" alt="" />
      </div>
      <!-- 右边 -->
      <div class="first-right">
        <div class="right-recommend">媒体视频</div>
        <div class="right-up">
          <!-- 右上 -->
          <video class="rightUp-video" controls muted loop autoplay>
            <source
              src="../../assets/upload/video-third.mp4"
              type="video/mp4"
            />
          </video>
        </div>
        <div class="right-down">
          <!-- 右中 -->
          <video class="rightDown-video" controls loop muted autoplay>
            <source src="../../assets/upload/video-two.mp4" type="video/mp4" />
          </video>
        </div>
        <div class="right-down">
          <!-- 右下 -->
          <video class="rightDown-video" controls loop muted autoplay>
            <source src="../../assets/upload/video-one.mp4" type="video/mp4" />
          </video>
        </div>
      </div>
    </div>

    <!-- 第二页---下半部分 -->
    <div class="second">
      <!-- 第二部分 -->
      <div class="company">
        <div class="moc">公司</div>
        <dl>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/08/10/1287194.html"
              >首开股份前七月签约金额514.11亿元 签约面积17</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/08/10/1287193.html"
              >龙湖7月单月合同销售金额118.5亿元 新增三块土地</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/08/10/1287190.html"
              >招商蛇口前7月签约销售金额1427.24亿 7月拿地21</a
            >
          </dd>
          <dd>
            <a href="http://news.dichan.sina.com.cn/2022/08/10/1287191.html"
              >卧龙地产上半年净利润约2.62亿元 同比减少24.4</a
            >
          </dd>
        </dl>
      </div>
      <div class="policy">
        <div class="moc">政策</div>
        <dl>
          <dd>
            <a href="#"
              >宏观|湖北对承租出台减免房租政策
              连云港：采用担保方式释放部分预售监管资金</a
            >
          </dd>
          <dd>
            <a href="#">提高 住建部：2022年全国建设不少于1000个“口袋公园”</a>
          </dd>
          <dd>
            <a href="#">廊坊：取消户籍、社保等限购条件 取消“北三县” 稳楼市</a>
          </dd>
          <dd>
            <a href="#"
              >多项政策工具推进“保交楼” 海南发布住房公积金阶段性支持政策
              缓解疫情冲击</a
            >
          </dd>
        </dl>
      </div>
      <div class="market">
        <div class="moc">市场</div>
        <dl>
          <dd>
            <a href="#"
              >疫情后物管业迎来洗牌契机 市场|疫情中断深圳楼市独立行情</a
            >
          </dd>
          <dd>
            <a href="#">市场|地产债面临多重考验 市场|房地产加速数字化变革</a>
          </dd>
          <dd><a href="#">国家统计局：7月CPI同比涨2.7% 居住价格上涨0.</a></dd>
          <dd><a href="#">广东LNG天然气价再次上涨，有陶瓷产区涨至5.5元</a></dd>
        </dl>
      </div>

      <!-- 房产信息 -->
      <div class="home-info">
        <!-- 标题 -->
        <div class="home-title">
          <div class="home-title-left"><p>最新动态</p></div>
          <div class="home-title-right">
            <a href="http://news.zhuge.com/all/yaowen-1815196.html"
              >一周公告合辑丨龙湖遭商票逾期传言突袭 超六成房企业绩预警亏损</a
            >
            <a href="http://news.zhuge.com/all/yaowen-1815195.html">
              <cite
                >越秀服务：坚守3年1亿平方米目标与审慎收并购策略丨资色·曝财报③</cite
              >
            </a>
          </div>
          <!-- <div class="home-title-right">每月二手房</div> -->
        </div>
        <!-- 内容 -->
        <div class="home-content">
          <div>
            <ul class="first">
              <li><a href="#">阿巴巴巴控股集团：前8月销售额600.08亿元</a></li>
              <li><a href="#">阿巴巴巴控股集团：广州二手房房源更新|天河最多，价格优惠买房的速看！</a></li>
              <li><a href="#">阿巴巴巴控股集团：8.11早看点|7月份居民消费价格同比上涨2.7%</a></li>
              <li><a href="#">阿巴巴巴控股集团：前8月销售额600.08亿元</a></li>
            </ul>
            <ul class="second">
              <li><a href="#">阿巴巴巴控股集团：租金周报|2022年第32周租金微升,环比上升0.05%</a></li>
              <li><a href="#">阿巴巴巴控股集团：7.9早看点|第30周监测新房、二手房成交整体回落，深圳新房成交涨势可观</a></li>
              <li><a href="#">阿巴巴巴控股集团：新房周报|2022年第30周广州新房在售楼盘1298个，半年内5个楼盘即将开盘</a></li>
              <li><a href="#">阿巴巴巴控股集团：集团月报|8.14集团8周年庆</a></li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 图片新闻 -->
      <div class="picture-news">
        <div class="picture-news-title">图片新闻</div>
        <div class="picture-content">
          <!-- 1 -->
          <div class="picture">
            <img src="../../assets/upload/city2.jpg" alt="" />
          </div>
          <!-- 2 -->
          <div class="picture">
            <img src="../../assets/upload/city5.avif" alt="" />
          </div>
          <!-- 3 -->
          <div class="picture">
            <img src="../../assets/upload/city3.jpg" alt="" />
          </div>
          <!-- 4 -->
          <div class="picture">
            <img src="../../assets/upload/city4.jpg" alt="" />
          </div>
          <!-- 5 -->
          <div class="picture">
            <img src="../../assets/upload/city1.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyNews",
  data() {
    return {
      show: false,
    };
  },
  async created() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
* {
  box-sizing: border-box;
}
dd {
  height: 2vh;
  margin-bottom: 5vh;
  margin-right: 1vw;
  a {
    display: block;
    font-size: 15px;
    text-indent: 2em;
  }
  a:hover {
    color: red;
  }
}
// -----------------第一部分
.first {
  .advertisement {
    width: 100vw;
    margin-bottom: 20px;
  }
  .first-left {
    // display: inline-block;
    float: left;
    width: 25vw;
    height: 90vh;
    margin-left: 1vw;
    // background-color: pink;

    .left-dl {
      width: 25vw;
      height: 90vh;
      h2 {
        display: flex;
        justify-content: center;
        height: 8vh;
        font-size: 20px;
        // color: red;
        // text-align: center;
        align-items: center;
        // background-color: rgb(104, 216, 223);
      }
    }
  }
  .first-center {
    display: inline-block;
    width: 50vw;
    height: 90vh;
    margin-left: 1vw;
    // background-color: lime;

    img {
      width: 50vw;
      height: 90vh;
    }
  }
  .first-right {
    // display: inline-block;
    float: right;
    width: 21vw;
    height: 90vh;
    // background-color: pink;

    .right-recommend {
      width: 20vw;
      height: 6vh;
      font-size: 18px;
      text-align: center;
      font-weight: 700;
      line-height: 6vh;
      margin-bottom: 2vh;
      color: #fff;
      background-color: rgb(89, 188, 227);
    }

    .right-up {
      width: 20vw;
      // height: 40vh;
      // background-color: lime;

      .rightUp-video {
        width: 20vw;
      }
    }
    .right-down {
      width: 20vw;
      // background-color: orange;

      .rightDown-video {
        width: 20vw;
      }
    }
  }
}

// ----------------------------第二部分
.second {
  width: 100vw;
  height: 100vh;
  margin-top: 3vh;
  // background-color: pink;

  .moc {
    display: flex;
    justify-content: start;
    align-items: center;
    height: 4vh;
    font-size: 16px;
    // border-top: 2px solid rgb(143, 138, 138);
    // border-bottom: 2px solid rgb(143, 138, 138);
    font-weight: bold;
    background-color: transparent;
    opacity: 0.7;
    background-color: rgb(49, 111, 216);
  }
  .company {
    float: left;
    width: 26vw;
    height: 34vh;
    margin-left: 1vw;
    // background-color: orange;
    dd {
      height: 1vh;
    }
    a {
      font-size: 12px;
      text-indent: 0;
    }
  }
  .policy {
    display: inline-block;
    width: 26vw;
    height: 34vh;
    margin-left: 8vw;
    // background-color: blue;
    dd {
      height: 1vh;
    }
    a {
      font-size: 12px;
      text-indent: 0;
    }
  }
  .market {
    float: right;
    width: 26vw;
    height: 34vh;
    margin-right: 2vw;
    // background-color: lime;
    dd {
      height: 1vh;
    }
    a {
      font-size: 12px;
      text-indent: 0;
    }
  }
  // 住房信息推荐
  .home-info {
    height: 35vh;
    // background-color: gold;
    .home-title {
      height: 10vh;

      // background-color: pink;
      .home-title-left {
        float: left;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 5vw;
        height: 10vh;
        margin-left: 5vw;
        margin-right: 1vw;
        background-color: rgb(255, 111, 0);
        p {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 3vw;
          font-size: 20px;
          color: #fff;
        }
      }
      .home-title-right {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: 10vh;
        font-size: 20px;
        color: #333;
        font-weight: bold;
        // background-color: lime;

        a {
          text-decoration: none;
        }
        a:hover {
          color: rgb(255, 132, 0);
        }
      }
    }
    .home-content {
      display: flex;
      justify-content: space-between;
      height: 20vh;
      margin-top: 2vh;
      margin-left: 5vw;
      border-top: 1px solid rgb(238, 238, 238);
      border-bottom: 1px solid rgb(238, 238, 238);
      .first {
        float: left;
        width: 45vw;
        padding-top: 2.5vh;
        a {
          margin-left: 1vw;
          display: block;
          margin-bottom: 1vh;
          position: relative;
          font-size: 14px;
        }
        a:hover {
          color: rgb(255, 132, 0);
        }
        a::before {
          content: "";
          position: absolute;
          height: 5px;
          width: 5px;
          border-radius: 3px;
          background: #807777;
          left: -13px;
          top: 7px;
        }
      }
      .second {
        a {
          display: block;
          margin-top: 1vh;
          position: relative;
          font-size: 14px;
        }
        a:hover {
          color: rgb(255, 132, 0);
        }
        a::before {
          content: "";
          position: absolute;
          height: 5px;
          width: 5px;
          border-radius: 3px;
          background: #807777;
          left: 44vw;
          top: 7px;
        }
      }
    }
  }
  .picture-news {
    height: 35vh;
    // background-color: aqua;
    .picture-news-title {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 5vh;
      font-size: 16px;
      font-weight: bold;
      // background-color: purple;
    }
    .picture-content {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .picture {
        display: inline-block;
        width: 19%;
        height: 25vh;
        // background-color: pink;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
